<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body {
	font-size: 14px;
}

input {
	vertical-align: middle;
	margin: 0;
	padding: 0
}

.file-box {
	position: relative;
	width: 340px
}

.txt {
	height: 22px;
	border: 1px solid #cdcdcd;
	width: 180px;
}

.btn {
	background-color: #FFF;
	border: 1px solid #CDCDCD;
	height: 24px;
	width: 70px;
}

.file {
	position: absolute;
	top: 0;
	right: 80px;
	height: 24px;
	filter: alpha(opacity : 0);
	opacity: 0;
	width: 260px
}
</style>
</head>

<body>
	<div>
		<label>用户帐号：</label>
		<input type="text" name="accountId" id="accountId" value="">
	</div>
	
	<div class="file-box">
		<form action="upload/uploadPoster.action" method="post" enctype="multipart/form-data">
			<input type='text' name='textfield' id='textfield' class='txt' /> 
			<input type='button' class='btn' value='浏览...' />
			<input type="file" name="fileField" class="file" id="fileField" size="28"
				onchange="document.getElementById('textfield').value=this.value" />
			<input type="submit" name="submit" class="btn" value="上传" />
		</form>
	</div>
	
</body>

<script type="text/javascript" src="js/jquery-3.1.1.min.js">
	$("#fileField").change(function() {
		var file = this.files[0];
		//判断类型是不是图片    
		if (!/image\/\w+/.test(file.type)) {
			alert("请确保文件为图像类型");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e) {
			image_base64 = this.result.split(",")[1];
			//就是base64   
			fileField = image_base64;
		}
	});
</script>
</html>